<template>
	<view class="container">
		<view class="hearder">
			<view class="left-img">
				<view class="imgs">

				</view>
				<view class="text">
					<text>阿萨德</text>
					<text>16623***23344</text>
				</view>
			</view>
			<view class="right-word">
				<uni-badge :text="5" max-num="9" absolute="lrightTop" :offset="[3,9]" size="small" >
					<uni-icons type="chatboxes-filled" size="36"  color="#fff"></uni-icons>
				</uni-badge>
			</view>
		</view>
		<view class="content">
			<view class="cent-gn">
				<view class="left-gn" @click="skip(1)">
					<uni-icons type="staff-filled" size="36" color="#0066ff"></uni-icons>
					<text>就诊人管理</text>
				</view>
				<view class="ringt-gn" @click="skip(2)">
					<uni-icons type="person-filled" size="36" color="#0066ff"></uni-icons>
					<text>住院人管理</text>
				</view>
			</view>
			
			
			
			<view class="footer-test">
				<mymaneli v-for="item in mytest" :list="item" @mygren="mygren"></mymaneli>
			</view>
			
		</view>

	</view>
</template>

<script>
	import mymaneli from '@/components/myCenter/maneLi/maneLi.vue'
	import {
		ref,
		reactive,
		toRefs,
	
	} from 'vue'
	export default {
		components:{
			mymaneli
		},
		setup() {
			const data=reactive({
				mytest:[
					{
						icon:'t-icon-xieye',
						title:'预约挂号记录',
						path:'',
						
					},
					{
						icon:'t-icon-yiyuan',
						title:'门诊缴费记录',
						path:'/pages/myCenter/outpatient/payment/payment',
						
					},
					{
						icon:'t-icon-jiuzhen',
						title:'门诊充值记录',
						path:'',
						
					},
					{
						icon:'t-icon-dianzijiankangka',
						title:'住院充值记录',
						path:'',
						
					},
					{
						icon:'t-icon-baogaochaxun',
						title:'核酸预约记录',
						path:'',
						
					},
					{
						icon:'t-icon-yimiao',
						title:'体检预约记录',
						path:'',
						
					},
					{
						icon:'t-icon-baogao',
						title:'问题反馈',
						path:'',
						
					},
				]
			})
			const skip=(path)=>{
				console.log(path)
			}
			
			const mygren=(path)=>{
				console.log(path,11);
				uni.navigateTo({
					url:path
				})
			}
			return {
				skip,...toRefs(data),mygren
			}
		}
		
		
		
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.container {
		font-size: 28rpx;
	}

	.hearder {
		@extend .flex;
		height: 280rpx;
		background-color: #0066ff;
		padding: 0 36rpx 40rpx;

		.left-img {
			display: flex;

			.imgs {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 32rpx;
			}

			.text {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				padding: 16rpx 0;
				font-size: 32rpx;
				color: #fff;

				:nth-child(2) {
					font-size: 24rpx;
				}
			}

			.right-word {
				position: relative;
				width: 36rpx;
				height: 36rpx;
				.iconfont {
					color: #fff;
					font-size: 36rpx;
				}
				
			}

		}

	}

	.content {
		padding: 36rpx;
	
	.cent-gn {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 20rpx;
			margin-top: -120rpx;
            @extend .flex1;
			box-shadow: 0 4rpx 20rpx 8rpx rgba(68,68, 102, .1);
			view {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				align-items: center;
				.uni-icons{
					margin-bottom: 12rpx;
				}
			}
		}
	}
	.footer-test{
		margin-top: 36rpx;
		padding: 20rpx 0;
		display: flex;
		flex-flow: column;
		border-radius: 20rpx;
		border: 1px solid #eee;
	}
</style>
